<template>
  <MainContainer class="p-5">
    <div class="flex">
      <el-button type="primary" @click="openDialog()">+添加联系人</el-button>
    </div>
    <MyTable
      v-loading="loading"
      class="my-2"
      :data="list"
      :columns="columns"
      :is-show-selection="false"
    ></MyTable>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
    <MyFormDialog
      v-model:visible="dialogVisible"
      v-model:formData="formData"
      :title="dialogTitle"
      :options="createFormOptions"
      :loading="loading"
      @confirm="handleConfirm"
    ></MyFormDialog>
  </MainContainer>
</template>
<script setup lang="jsx">
import useCRUD from "@/composables/useCRUD.js";
import MainContainer from "@/components/MainContainer.vue";
import MyFormDialog from "@/components/MyFormDialog.vue";
import MyTable from "@/components/MyTable.vue";
import parseTime from "@/utils/parseTime.js";
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getAbnormalUser,
  createAbnormalUser,
  deleteAbnormalUser,
  updateAbnormalUser,
  getAbnormalUserOne,
  getAbnormalCompanyId,
  getAbnormalWxCode,
} from "@/api/robot-disinfect-alarm";
import robot from "@/assets/images/disinfect/code.jpg";

const channelList = ref([
  {
    name: "微信",
    value: 1,
  },
  {
    name: "短信",
    value: 2,
  },
  {
    name: "钉钉",
    value: 3,
  },
]);

function handleChange(v) {
  formData.value.type = v;
}

async function changeCompany(id) {
  const res = await getAbnormalWxCode(id);
  const { code } = res.data;
  formData.value.wxcode = code;
}

const createFormOptions = [
  {
    prop: "companyId",
    label: "公司名称：",
    rules: {
      required: true,
      message: "必填",
    },
    customRender() {
      return (
        <el-select placeholder="请选择" class="w-full">
          {companyNameList.value.map((item) => {
            return (
              <el-option
                data-test="company-list"
                label={item.name}
                value={item.id}
                link
                onClick={() => changeCompany(item.id)}
              ></el-option>
            );
          })}
        </el-select>
      );
    },
  },
  {
    prop: "name",
    label: "联系人：",
    rules: {
      required: true,
      message: "必填",
    },
  },
  {
    prop: "remark",
    label: "备注：",
  },
  {
    prop: "type",
    label: "接收渠道：",
    rules: {
      required: true,
      message: "必填",
    },
    customRender() {
      if (showItem.value === false) {
        return (
          <el-checkbox-group onChange={(value) => handleChange(value)} disabled>
            {channelList.value.map((item) => {
              return (
                <el-checkbox-button label={item.value} value={item.value}>
                  {item.name}
                </el-checkbox-button>
              );
            })}
          </el-checkbox-group>
        );
      } else {
        return (
          <el-checkbox-group onChange={(value) => handleChange(value)}>
            {channelList.value.map((item) => {
              return (
                <el-checkbox-button label={item.value} value={item.value}>
                  {item.name}
                </el-checkbox-button>
              );
            })}
          </el-checkbox-group>
        );
      }
    },
  },
  {
    prop: "wxcode",
    label: "绑定码：",
    customRender() {
      return (
        <div class="flex flex-1 items-center">
          <el-input
            disabled
            class="h-full"
            v-model={formData.value.wxcode}
          ></el-input>
          <el-image class=" select-none right" src={robot} />
        </div>
      );
    },
  },
  {
    prop: "phone",
    label: "联系手机：",
    customRender() {
      if (showPhone.value === false) {
        return <el-input disabled class="h-full"></el-input>;
      } else {
        return <el-input class="h-full"></el-input>;
      }
    },
  },
  {
    prop: "content",
    label: "推送内容：",
    customRender() {
      if (showDingtalkChat.value === false) {
        return <el-input disabled class="h-full"></el-input>;
      } else {
        return <el-input class="h-full"></el-input>;
      }
    },
  },
  {
    prop: "webhook",
    label: "webhook：",
    customRender() {
      if (showDingtalkChat.value === false) {
        return <el-input disabled class="h-full"></el-input>;
      } else {
        return <el-input class="h-full"></el-input>;
      }
    },
  },
  {
    prop: "sign",
    label: "加密签名：",
    customRender() {
      if (showDingtalkChat.value === false) {
        return <el-input disabled class="h-full"></el-input>;
      } else {
        return <el-input class="h-full"></el-input>;
      }
    },
  },
];

const columns = [
  {
    prop: "name",
    label: "联系人：",
  },
  {
    prop: "type",
    label: "接收渠道：",
    formatter(row) {
      let { type } = row;
      switch (type) {
        case "1":
          return "微信";
        case "2":
          return "短信";
        case "3":
          return "钉钉";
        default:
          break;
      }
    },
  },
  {
    prop: "remark",
    label: "备注：",
    formatter(row) {
      if (!row.remark) {
        return "无";
      } else {
        return row.remark;
      }
    },
  },
  {
    prop: "phone",
    label: "联系手机：",
    formatter(row) {
      if (!row.phone) {
        return "无";
      } else {
        return row.phone;
      }
    },
  },
  {
    prop: "companyName",
    label: "公司名称：",
  },
  {
    prop: "content",
    label: "推送内容：",
    formatter(row) {
      if (!row.dingtalkChatConfig) {
        return "无";
      } else {
        return row.dingtalkChatConfig.content;
      }
    },
  },
  {
    prop: "webhook",
    label: "Webhook：",
    formatter(row) {
      if (!row.dingtalkChatConfig) {
        return "无";
      } else {
        return row.dingtalkChatConfig.webhook;
      }
    },
  },
  {
    prop: "sign",
    label: "加密签名：",
    formatter(row) {
      if (!row.dingtalkChatConfig) {
        return "无";
      } else {
        return row.dingtalkChatConfig.sign;
      }
    },
  },
  {
    prop: "createTime",
    label: "创建时间",
    formatter(row) {
      const date = new Date(row.createTime);
      return parseTime(date);
    },
  },
  {
    label: "操作",
    prop: "action",
    minWidth: 100,
    customRender(row) {
      return (
        <div>
          <el-button
            link
            onClick={async () => {
              await ElMessageBox.confirm("确认继续操作吗", "警告");
              const { message } = await handleDelete(row.id);
              ElMessage({ type: "success", message });
            }}
          >
            删除
          </el-button>
          <el-button
            class="!text-[#707bdf]"
            link
            onClick={() => openDialog(row.id, row.type)}
          >
            编辑
          </el-button>
        </div>
      );
    },
  },
];

onMounted(() => {
  getRobotList();
});

async function getOne(id) {
  const res = await getAbnormalUserOne(id);
  formData.value = res.data;
  if (formData.value.type === "3") {
    formData.value.content = res.data.dingtalkChatConfig.content;
    formData.value.webhook = res.data.dingtalkChatConfig.webhook;
    formData.value.sign = res.data.dingtalkChatConfig.sign;
  }
}

const showItem = ref(true);
const showPhone = ref(true);
const showDingtalkChat = ref(true);

function openDialog(id, type) {
  dialogTitle.value = id ? "编辑" : "新增";
  showItem.value = id ? false : true;
  if (id) {
    showPhone.value = false;
    showDingtalkChat.value = false;
    switch (type) {
      case "2":
        showPhone.value = true;
        break;
      case "3":
        showDingtalkChat.value = true;
        break;
      default:
        break;
    }
    getOne(id);
  } else {
    showPhone.value = true;
    showDingtalkChat.value = true;
  }
  dialogVisible.value = true;
}

function handleConfirm(data) {
  data.dingtalkChatConfig = {
    content: data.content || "",
    sign: data.sign || "",
    webhook: data.webhook || "",
  };
  data.type = data.type.toString();
  if (data.id) {
    handleUpdate(data.id, data);
  } else {
    handleCreate(data);
  }
}

//获取公司名称列表
const companyNameList = ref([]);

async function getRobotList() {
  const res = await getAbnormalCompanyId();
  companyNameList.value = res.data;
}

const crudOptions = {
  queryApi: getAbnormalUser,
  createApi: createAbnormalUser,
  deleteApi: deleteAbnormalUser,
  updateApi: updateAbnormalUser,
};
const {
  params,
  handleQuery,
  list,
  loading,
  dialogVisible,
  handleDelete,
  formData,
  dialogTitle,
  total,
  handleUpdate,
  handleCreate,
} = useCRUD(crudOptions);

handleQuery();
</script>
